<style>
.setting-page {
    padding: 5px 0;
}

.setting-page .handle-content {
    display: flex;
    align-items: center;
    border: 1px solid #CFDBF3;
    border-radius: 3px;
    margin-bottom: 5px;
    padding: 15px 30px;
    background-color: #E7ECF8;
}

.setting-page .handle-content .item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    color: #000000;
}

.setting-page .handle-content .item::before {
    content: '';
    position: absolute;
    top: 9px;
    left: -10px;
    display: inline-block;
    border-top: 6px solid #B2B7AC;
    border-bottom: 6px solid #B2B7AC;
    width: 6px;
    height: 14px;
    background-color: #E7ECF8;
}

.setting-page .handle-content .item input {
    border: 1px solid rgb(169, 169, 169);
    border-radius: 5px;
    width: 60px;
    height: 28px;
    text-align: center;
}

.setting-page .table-content {
    border: 1px solid #246CE1;
    border-radius: 4px;
    margin-bottom: 10px;
}

.setting-page .table-content .table-head {
    display: flex;
    height: 35px;
    font-size: 16px;
    color: #ffffff;
    background-color: #246CE1;
}

.setting-page .table-content .table-head .name {
    width: 20%;
    line-height: 35px;
    text-align: center;
}

.setting-page .table-content .table-head .level {
    width: 80%;
    line-height: 35px;
    text-align: center;
}

.setting-page .table-content .table-body {
    height: 245px;
    overflow-y: auto;
}

.setting-page .table-content .table-body .tr {
    display: flex;
    border-bottom: 1px solid #246CE1;
}

.setting-page .table-content .table-body .tr:last-child {
    border-bottom: 0;
}

.setting-page .table-content .table-body .tr .name {
    border-right: 1px solid #246CE1;
    width: 20%;
    line-height: 40px;
    text-align: center;
}

.setting-page .table-content .table-body .tr .level {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 20px;
    width: 80%;
}

.setting-page .table-content .table-body .tr .td .item {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 140px;
    height: 40px;
    font-size: 14px;
}

.setting-page .table-content .table-body .tr .td .item input {
    border: 1px solid rgb(169, 169, 169);
    border-radius: 5px;
    width: 60px;
    height: 28px;
    text-align: center;
}

.setting-page .table-content .table-body .tr .td .item .blue {
    color: #417EF9;
}

.setting-page .table-content .table-body .tr .td .item .yellow {
    color: yellow;
}

.setting-page .table-content .table-body .tr .td .item .orange {
    color: #FFB54D;
}

.setting-page .table-content .table-body .tr .td .item .red-color {
    color: #E3585F;
}

.setting-page .btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    height: 40px;
}

.setting-page .btns span {
    display: inline-block;
    border-radius: 4px;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #ffffff;
    background-color: #3A7CE9;
    cursor: pointer;
}
</style>

<div id="settingPage" class="setting-page">
    <div class="handle-content">
        <div class="item">
            <span>声音时长：</span>
            <input id="soundDuration" type="number" min="0" value="" />
            <span>s</span>
        </div>
        <div class="item">
            <span>外呼时长：</span>
            <input id="callDuration" type="number" min="0" value="" />
            <span>s</span>
        </div>
    </div>

    <div class="table-content">
        <div class="table-head">
            <div class="th name">报警产品</div>
            <div class="th level">报警级别</div>
        </div>

        <div class="table-body">
            
        </div>
    </div>

    <div class="btns">
        <span class="resetBtn">✔ 重置</span>
        <span class="publishBtn">✔ 确认</span>
    </div>
</div>

<script type="text/javascript">
;(function () {
    let main = {
        userInfo: '',
        autoWarnDural: [],
        autoWarnLevel: null,
        elementNames: {
            TP10M: {label: '10分钟降水', unit: 'mm'},
            TP1H: {label: '1小时降水', unit: 'mm'},
            GUSTWS: {label: '阵风', unit: 'm/s'},
            VIS: {label: '能见度', unit: 'm'},
            TMP: {label: '高温', unit: '℃'},
            RADAR: {label: '雷达回波', unit: 'dBZ'}
        },
        levelInfo: {
            0: {class: 'red-color', name: '红色'},
            1: {class: 'orange', name: '橙色'},
            2: {class: 'yellow', name: '黄色'},
            3: {class: 'blue', name: '蓝色'}
        },
        init: function () {
            this.bindEvt();
            this.initView();
        },
        bindEvt: function () {
            $('.publishBtn').off('click').on('click', () => {
                this.submitHighWarnData();
            });
            $('.resetBtn').off('click').on('click', () => {
                this.reset();
            });
        },
        initView: function () {
            this.userInfo = $('#userInfo').data('info');
            this.queryAutoWarnLevel();
            this.queryAutoWarnDural();
        },
        async queryAutoWarnDural() {
            let res = await $.ajax({
                type: 'GET',
                url: 'shortWarn/autoStation/queryAutoWarnDural',
            });
            // let res = await Promise.resolve({"code":200,"msg":"操作成功","data":{"AVGWS":[{"element":"AVGWS","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":10.8,"upperVal":14.5},{"element":"AVGWS","level":2,"warnLevel":2,"levelName":"黄色","lowVal":14.5,"upperVal":17.2},{"element":"AVGWS","level":3,"warnLevel":1,"levelName":"橙色","lowVal":17.2,"upperVal":20.8},{"element":"AVGWS","level":4,"warnLevel":0,"levelName":"红色","lowVal":20.8,"upperVal":9999.0}],"DIV":[{"element":"DIV","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":0.4,"upperVal":10001.0}],"GUSTWS":[{"element":"GUSTWS","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":10.8,"upperVal":17.2},{"element":"GUSTWS","level":2,"warnLevel":2,"levelName":"黄色","lowVal":17.2,"upperVal":25.9},{"element":"GUSTWS","level":3,"warnLevel":1,"levelName":"橙色","lowVal":13.9,"upperVal":10.8},{"element":"GUSTWS","level":4,"warnLevel":0,"levelName":"红色","lowVal":17.2,"upperVal":13.9}],"TMP":[{"element":"TMP","level":2,"warnLevel":2,"levelName":"黄色","lowVal":35.0,"upperVal":37.0},{"element":"TMP","level":3,"warnLevel":1,"levelName":"橙色","lowVal":37.0,"upperVal":40.0},{"element":"TMP","level":4,"warnLevel":0,"levelName":"红色","lowVal":40.0,"upperVal":100.0}],"TP10M":[{"element":"TP10M","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":500.0,"upperVal":10.0},{"element":"TP10M","level":2,"warnLevel":2,"levelName":"黄色","lowVal":10.0,"upperVal":15.0},{"element":"TP10M","level":3,"warnLevel":1,"levelName":"橙色","lowVal":600.0,"upperVal":500.0},{"element":"TP10M","level":4,"warnLevel":0,"levelName":"红色","lowVal":700.0,"upperVal":600.0}],"TP1H":[{"element":"TP1H","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":20.0,"upperVal":50.0},{"element":"TP1H","level":2,"warnLevel":2,"levelName":"黄色","lowVal":50.0,"upperVal":90.0},{"element":"TP1H","level":3,"warnLevel":1,"levelName":"橙色","lowVal":25.0,"upperVal":20.0},{"element":"TP1H","level":4,"warnLevel":0,"levelName":"红色","lowVal":30.0,"upperVal":25.0}],"VIS":[{"element":"VIS","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":50.0,"upperVal":20.0},{"element":"VIS","level":2,"warnLevel":2,"levelName":"黄色","lowVal":100.0,"upperVal":50.0},{"element":"VIS","level":3,"warnLevel":1,"levelName":"橙色","lowVal":20.0,"upperVal":100.0},{"element":"VIS","level":4,"warnLevel":0,"levelName":"红色","lowVal":0.0,"upperVal":50.0}]}})
            console.log('queryAutoWarnDural res======>', res);
            if (res.code === 200) {
                this.autoWarnDural = res.data;
                $('#soundDuration').val(this.autoWarnDural.find(el => el.type === '1').dural);
                $('#callDuration').val(this.autoWarnDural.find(el => el.type === '2').dural);
            }
        },
        async queryAutoWarnLevel() {
            let res = await $.ajax({
                type: 'GET',
                url: 'shortWarn/autoStation/queryAutoWarnLevel',
            });
            // let res = await Promise.resolve({"code":200,"msg":"操作成功","data":{"AVGWS":[{"element":"AVGWS","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":10.8,"upperVal":14.5},{"element":"AVGWS","level":2,"warnLevel":2,"levelName":"黄色","lowVal":14.5,"upperVal":17.2},{"element":"AVGWS","level":3,"warnLevel":1,"levelName":"橙色","lowVal":17.2,"upperVal":20.8},{"element":"AVGWS","level":4,"warnLevel":0,"levelName":"红色","lowVal":20.8,"upperVal":9999.0}],"DIV":[{"element":"DIV","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":0.4,"upperVal":10001.0}],"GUSTWS":[{"element":"GUSTWS","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":10.8,"upperVal":17.2},{"element":"GUSTWS","level":2,"warnLevel":2,"levelName":"黄色","lowVal":17.2,"upperVal":25.9},{"element":"GUSTWS","level":3,"warnLevel":1,"levelName":"橙色","lowVal":13.9,"upperVal":10.8},{"element":"GUSTWS","level":4,"warnLevel":0,"levelName":"红色","lowVal":17.2,"upperVal":13.9}],"TMP":[{"element":"TMP","level":2,"warnLevel":2,"levelName":"黄色","lowVal":35.0,"upperVal":37.0},{"element":"TMP","level":3,"warnLevel":1,"levelName":"橙色","lowVal":37.0,"upperVal":40.0},{"element":"TMP","level":4,"warnLevel":0,"levelName":"红色","lowVal":40.0,"upperVal":100.0}],"TP10M":[{"element":"TP10M","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":500.0,"upperVal":10.0},{"element":"TP10M","level":2,"warnLevel":2,"levelName":"黄色","lowVal":10.0,"upperVal":15.0},{"element":"TP10M","level":3,"warnLevel":1,"levelName":"橙色","lowVal":600.0,"upperVal":500.0},{"element":"TP10M","level":4,"warnLevel":0,"levelName":"红色","lowVal":700.0,"upperVal":600.0}],"TP1H":[{"element":"TP1H","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":20.0,"upperVal":50.0},{"element":"TP1H","level":2,"warnLevel":2,"levelName":"黄色","lowVal":50.0,"upperVal":90.0},{"element":"TP1H","level":3,"warnLevel":1,"levelName":"橙色","lowVal":25.0,"upperVal":20.0},{"element":"TP1H","level":4,"warnLevel":0,"levelName":"红色","lowVal":30.0,"upperVal":25.0}],"VIS":[{"element":"VIS","level":1,"warnLevel":3,"levelName":"蓝色","lowVal":50.0,"upperVal":20.0},{"element":"VIS","level":2,"warnLevel":2,"levelName":"黄色","lowVal":100.0,"upperVal":50.0},{"element":"VIS","level":3,"warnLevel":1,"levelName":"橙色","lowVal":20.0,"upperVal":100.0},{"element":"VIS","level":4,"warnLevel":0,"levelName":"红色","lowVal":0.0,"upperVal":50.0}]}})
            console.log('queryAutoWarnLevel res======>', res);
            if (res.code === 200) {
                this.autoWarnLevel = res.data;
                this.renderTableRows();
                Object.keys(this.autoWarnLevel).forEach(key => {
                    this.autoWarnLevel[key].forEach(el => {
                        $(`#${key}${el.warnLevel}`).val(el.lowVal);
                    });
                });
            }
        },
        renderTableRows: function() {
            const tableBody = $('.table-body').empty();
            Object.keys(this.elementNames).forEach(el => {
                const $row = $(`<div id="${el}" class="tr"></div>`);
                $row.append(`<div class="td name">${this.elementNames[el].label}</div>`);
                const $levelCell = $('<div class="td level"></div>');
                this.autoWarnLevel[el]?.forEach(item => {
                    if (['TP10M', 'TP1H', 'GUSTWS', 'VIS'].includes(el) && item.warnLevel === 2) return;
                    if (['TMP'].includes(el) && item.warnLevel === 3) return;
                    const $item = $(
                        `<div class="item">
                            <span class="item-label ${this.levelInfo[item.warnLevel].class}">${this.levelInfo[item.warnLevel].name}</span>
                            <span class="symbol">${el === 'VIS' ? '&lt;' : '&gt;'}</span>
                            <input id="${el}${item.warnLevel}" type="number" min="0" value="" />
                            <span class="unit">${this.elementNames[el].unit}</span>
                        </div>`
                    );
                    $levelCell.append($item);
                });
                $row.append($levelCell);
                tableBody.append($row);
            });
        },
        reset: function(data) {
            $('#soundDuration').val(this.autoWarnDural.find(el => el.type === '1').dural);
            $('#callDuration').val(this.autoWarnDural.find(el => el.type === '2').dural);
            let autoWarnLevel = data || this.autoWarnLevel;
            Object.keys(autoWarnLevel).forEach(key => {
                autoWarnLevel[key].forEach(el => {
                    $(`#${key}${el.warnLevel}`).val(el.lowVal);
                });
            });
        },
        submitHighWarnData: async function () {
            let params = [];
            Object.keys(this.autoWarnLevel).forEach(key => {
                this.autoWarnLevel[key].forEach(el => {
                    params.push({
                        ...el,
                        lowVal: $(`#${key}${el.warnLevel}`).val()
                    })
                });
            });

            let res = await $.ajax({
                url: 'shortWarn/autoStation/updateAutoWarnLevel',
                type: 'POST',
                data: JSON.stringify(params),
                contentType: 'application/json'
            });
            console.log('updateAutoWarnLevel res======>', res);
            
            let res2 = await $.ajax({
                url: 'shortWarn/autoStation/updateAutoWarnDural',
                type: 'POST',
                data: JSON.stringify([
                    {
                        dural: $('#soundDuration').val(),
                        type: '1'
                    },
                    {
                        dural: $('#callDuration').val(),
                        type: '2'
                    }
                ]),
                contentType: 'application/json'
            });

            if (res.code === 200 && res2.code === 200) {
                alert(res.msg);
                CafeJS.ModalBoxClose('set');
                $('#set').removeClass('active');
                CafeJS.jcyb.initDatePicker();
            }
        },
    };
    
    main.init();
})();
</script>
